<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
</head>

<body>
    <!-- 3种都是全局组件 -->
    <div id="app">
        <!-- 还是使用标签形式 引入组件 -->
        <mycom3></mycom3>
    </div>

    <div id="app2">
        <mycom3></mycom3>
        <!-- 私有的login -->
        <login></login>
    </div>



    <!-- 在被控制的#app 外面，使用 template 元素，定义组件的html模板结构 -->
    <template id="tmpl">
        <div>
            <h1>这是通过 template 元素, 在外部定义的组件结构，这有代码的提示和高亮。</h1>
            <h4>好用，不错!</h4>
        </div>
    </template>

    <template id="tmpl2">
        <h1>这是定义的私有login组件</h1>
    </template>

    <script>
        //全局组件
        Vue.component('mycom3', {
            //无论以哪种方式创建组件，组件的 template 属性有且必须只有唯一的一个根元素
            template: '#tmpl'
        })


        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {}
        })

        var vm = new Vue({
            el: "#app2",
            data: {},
            methods: {},
            components: {
                login: {
                    template: "#tmpl2"
                }
            }
        })
    </script>
</body>

</html>